<template>
  <div class="app-container">
    <div class="filter-container">
      活动名称:
      <el-input v-model="listQuery.name" label="活动名称" placeholder="关键词" style="width: 200px;"
        class="filter-item mring10" @keyup.enter.native="handleFilter" suffix-icon="el-icon-search" />
      <el-button v-waves class="filter-item mring10" type="primary" icon="el-icon-search" @click="handleFilter"
        size="small"> 搜索</el-button>
      <el-button v-waves  type="success" icon="el-icon-plus" @click="handleCreate()" size="small"> 添加优惠券</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" fit stripe highlight-current-row
      style="width: 100%;margin-top: 1.125rem" row-key="id">
      <!-- <el-table-column label="编号" prop="id" sortable="custom" align="center" width="80"></el-table-column> -->
      <el-table-column label="优惠券名称" prop="name" min-width="150"></el-table-column>
      <el-table-column label="优惠券类型" prop="sort" min-width="120">
        <template slot-scope="{row}">
          {{ row.free_type==1?'满减券':'满折券' }}
        </template>
      </el-table-column>
      <el-table-column label="优惠金额" prop="status_name" class-name="status-col" width="100">
        <template slot-scope="{row}">
          {{ row.free_type==1?('￥'+row.coupon_price):(row.coupon_price+'折') }}
        </template>
      </el-table-column>
      <el-table-column label="使用门槛" min-width="150" align="center">
        <template slot-scope="{row}">
          ￥{{ row.price}}
        </template>
      </el-table-column>
      <el-table-column label="适用范围" prop="create_time" min-width="150" align="center">
        <template slot-scope="{row}">
          {{ row.goods_type==1?'全平台':'指定分类可用' }}
        </template>
      </el-table-column>
      <el-table-column label="使用时间" min-width="150" align="center">
        <template slot-scope="{row}">
          <span v-if="row.time_type==0">
            {{ row.receive_start_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }} - {{ row.receive_end_time |
            parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}
          </span>
          <span v-else>领取后{{row.receive_after_day}}天</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status_name" min-width="150" align="center"> </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="text" @click="showDetail(row.id)" size="small">查看</el-button>
          <el-button v-if="row.status==1" type="text" @click="handleUpdate(row.id, 0)" size="small">停用</el-button>
          <el-button v-if="row.status==0" type="text" @click="handleUpdate(row.id, 1)" size="small">启用</el-button>
          <el-button type="text" @click="nowCoupon(row.id)" size="small">发放列表</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination hide-on-single-page v-show="total > 0" :total="total" :page.sync="listQuery.page"
      :limit.sync="listQuery.size" @pagination="getList" />

    <el-dialog title="发放列表" :visible.sync="dialogTableVisible">
      <el-table :data="receiveData">
        <el-table-column label="用户信息" width="250">
          <template slot-scope="{row}">
            <img v-if="row.member.image" :src="row.member.image" class="avatar"
              style="float:left;margin-right:5px;max-width: 50px;max-height: 50px;padding: 1px;border:1px solid #ccc;">
            {{ row.member.username}}
          </template>
        </el-table-column>
        <el-table-column label="绑定时间" width="200">
          <template slot-scope="{row}">
            {{row.create_time| parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
          </template>
        </el-table-column>
        <!-- <el-table-column  label="领取/发放限制"></el-table-column> -->
        <el-table-column label="有效期" width="300">
          <template slot-scope="{row}">
            {{row.start_time}} - {{row.end_time}}
          </template>
        </el-table-column>
        <el-table-column label="是否已使用" width="150">
          <template slot-scope="{row}">
            {{row.status ==0 ?'未使用':'已使用'}}
          </template>
        </el-table-column>
      </el-table>
      <pagination style="text-align: center;margin-top: 1.125rem;position: static;" hide-on-single-page
        v-show="receiveTotal>0" :total="receiveTotal" :page.sync="receiveListQuery.page"
        :limit.sync="receiveListQuery.size" page-sizes="[5]" @pagination="getReceiveList" />
    </el-dialog>
  </div>
</template>
  <script>
  import waves from '@/directive/waves' // waves directive
  import { parseTime } from '@/utils'
  import Pagination from '@/components/Pagination'
  import { fetchList ,updateStatus,receiveList} from '@/api/activity/coupon/coupon'
  
  export default {
    name: 'ComplexTable',
    components: { Pagination },
    directives: { waves },
    data() {
      return {
        dialogTableVisible:false,
        receiveData:[],
        list: [],
        nowCouponId:0,
        listLoading: false,
        receiveTotal:0,
        receiveListQuery: {
          size: 5,
          page: 1
        },
        total: 0,
        listQuery: {
          size: 10,
          page: 1
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      handleCreate() {
        this.$router.push({name:'addCoupon'})
      },
      getList() {
        this.listLoading = true
        fetchList(this.listQuery).then(response => {
          this.list = response.data.data
          this.list.map(v => { v.status_name = v.status == 1 ? '开启' : (v.status == 2?'作废':'禁用'); })
          this.total = response.data.total
          this.listLoading = false
        })
      },
      nowCoupon(id){
        this.nowCouponId = id;
        this.dialogTableVisible=true
        this.getReceiveList()
      },
      getReceiveList(){
        this.listLoading = true
        this.receiveListQuery.coupon_id = this.nowCouponId
        receiveList(this.receiveListQuery).then(response => {
          this.receiveData = response.data.data
          this.receiveTotal = response.data.total
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      showDetail(id){
        this.$router.push({ path: './addCoupon',query:{id:id} })
      },
      handleUpdate(id,status) {
        this.listLoading = true
        let _data ={
          id:id,
          status:status
        }
        updateStatus(_data).then(response => {
          this.listLoading = false

          if (response.code == 200) {
            this.$message({
              message: '操作Success',
              type: 'success'
            })
          }
          
          this.getList()
        })
      },
    }
  }
  
  </script>
  <style type="text/css">
  .avatar,
  .avatar-uploader-icon {
    width: 90px;
    height: 90px;
    padding: 1px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 90px;
  }
  
  .filter-container {
    background: #FFFFFF;
    padding: 0.625rem 1.125rem;
  }
  
  table td {
    font-size: 12px;
    color: #8c8c8c;
  }
  
  .filter-container {
    font-size: 12px;
  }
  
  .filter-item input[type='text'] {
    height: 32px;
    line-height: 32px;
    font-size: 12px;
  }
  
  .mring10 {
    margin-right: 10px;
  }
  </style>
  